<template>
  <div class="box">
    <div class="top">
      <el-row type="flex" class="row-bg" justify="space-between">
        <el-col :span="4">
          <div
            style="border-radius:20px;cursor: pointer;background:#66b1ff;height:90px;border: 1px solid #ccc;display: flex;flex-direction: column;align-items: center;justify-content: center;"
            @click="statusAll('')"
          >
            <span>{{ statistics }}</span>
            <span class="carStatue">总在售车辆</span>
          </div>
        </el-col>
      </el-row>
    </div>
    <div class="seach">
      <el-row :gutter="20" style="display:flex">
        <el-col :span="6" style="min-width:399px">
          <span class="lable">车源ID</span>
          <span>
            <el-input v-model="carInfo.carId" placeholder="请输入内容" />
          </span>
        </el-col>
        <el-col :span="5" style="min-width:330px">
          <span class="lable">用户ID</span>
          <span>
            <el-input v-model="carInfo.userId" placeholder="请输入内容" />
          </span>
        </el-col>
        <el-col :span="5" style="min-width:330px">
          <span class="lable">VIN</span>
          <span><el-input v-model="carInfo.vin" placeholder="请输入内容" />
          </span>
        </el-col>
        <el-col :span="8" style="min-width:530px">
          <span class="lable">上牌地</span>
          <span style="display:flex">
            <el-select
              v-model="carInfo.applyProvid"
              style="margin-right:20px"
              placeholder="请选择省份"
              filterable
              clearable
              @change="changeProvid"
            >
              <el-option
                v-for="item in carInfo.optionsProvid"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              />
            </el-select>
            <el-select
              v-model="carInfo.applyCity"
              placeholder="请选择市区"
              :disabled="!carInfo.applyProvid"
              filterable
              clearable
            >
              <el-option
                v-for="item in carInfo.optionscity"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              />
            </el-select>
          </span>
        </el-col>
      </el-row>
      <el-row :gutter="10" style="margin-top:30px;display:flex">
        <el-col :span="8" style="min-width:520px">
          <span class="lable">上牌时间</span>
          <span>
            <el-date-picker
              v-model="carInfo.applyTime"
              type="daterange"
              format="yyyy-MM-dd"
              value-format="yyyy-MM-dd"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
            />
          </span>
        </el-col>
        <el-col :span="8" style="min-width:520px">
          <span class="lable">上架时间</span>
          <span>
            <el-date-picker
              v-model="carInfo.createCarTime"
              type="daterange"
              format="yyyy-MM-dd"
              value-format="yyyy-MM-dd"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
            />
          </span>
        </el-col>
        <el-col :span="2" style="min-width:130px">
          <el-button type="primary" @click="search">搜索</el-button>
          <el-button type="primary" @click="reset">重置</el-button>
        </el-col>
      </el-row>
    </div>
    <el-table
      v-loading="loading"
      :data="tableData"
      style="width: 100%;margin-top:30px"
      border
      @sort-change="sortmethods"
    >
      <el-table-column type="index" width="50" label="序号" align="center" />
      <el-table-column
        v-for="item in params"
        :key="item.code"
        :sortable="
          item.text === '点赞量' ||
            item.text === '浏览量' ||
            item.text === '留言人次'
            ? 'custom'
            : false
        "
        :label="item.text"
        align="center"
      >
        <!--
        :sort-method="sortmethods"

          :sortable="item.text === '点赞量' || item.text === '浏览量'|| item.text === '留言人次'?true:false" -->

        <template slot-scope="scope">
          <span v-if="item.text === '售价'">
            {{ scope.row[item.paramsCode]? scope.row[item.paramsCode].toFixed(2):'' }}万
          </span>
          <span v-else>
            {{ scope.row[item.paramsCode] }}
          </span>
        </template>
      </el-table-column>
      <el-table-column width="150" label="操作" align="center">
        <template slot-scope="scope">
          <span
            style="margin-right:20px;cursor: pointer;"
            @click="goto(scope.row, '下架')"
          >下架</span>
          <span
            style="cursor: pointer;"
            @click="goto(scope.row, '详情')"
          >详情</span>
        </template>
      </el-table-column>
    </el-table>
    <pagination
      v-show="pagination.total > 0"
      :total="pagination.total"
      :page.sync="pagination.pageNum"
      :limit.sync="pagination.pageSize"
      @pagination="inquire"
    />
    <el-dialog
      title="请选择下架形式"
      :visible.sync="dialogVisible"
      width="30%"
      :before-close="handleClose"
    >
      <el-radio v-model="radio" label="103">已出售</el-radio>
      <el-radio v-model="radio" label="110">自主下架</el-radio>
      <el-radio v-model="radio" label="111">拉黑</el-radio>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button
          type="primary"
          @click="goto('', '确认下架')"
        >确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
import Pagination from '@/components/Pagination'

export default {
  components: {
    Pagination
  },
  data() {
    return {
      carInfo: {
        carId: '', // 车源ID
        userId: '', // 用户ID
        vin: '', // vin
        applyProvid: '', // 上牌省份
        applyCity: '', // 上牌地
        applyCityName: '', // 上牌地
        createCarTime: '', // 上架时间
        applyTime: '', // 上牌时间
        status: '', // 状态
        statusOptions: [
          {
            value: '0',
            label: '人车认证'
          },
          {
            value: '1',
            label: '车辆基础信息'
          },
          {
            value: '2',
            label: '车辆图片视频'
          },
          {
            value: '3',
            label: '车况描述'
          },
          {
            value: '4',
            label: '交车设置'
          },
          {
            value: '5',
            label: '上架服务'
          },
          {
            value: '6',
            label: '发布预览'
          }
        ],
        Allstatus: '',
        optionsProvid: [],
        optionscity: []
      },
      pagination: {
        pageSize: 20,
        pageNum: 1,
        total: 0
      },
      tableData: [],
      params: [
        {
          paramsCode: 'carSourceNo',
          text: '车源ID'
        },
        {
          paramsCode: 'addedTime',
          text: '上架时间'
        },

        {
          paramsCode: 'userId',
          text: '用户ID'
        },
        {
          paramsCode: 'brandModel',
          text: '品牌车系'
        },
        {
          paramsCode: 'amount',
          text: '售价'
        },
        {
          paramsCode: 'vin',
          text: 'VIN'
        },

        {
          paramsCode: 'spCity',
          text: '上牌地'
        },
        {
          paramsCode: 'spTime',
          text: '上牌时间'
        },
        {
          paramsCode: 'likesNum',
          text: '点赞量'
        },
        {
          paramsCode: 'viewsNum',
          text: '浏览量'
        },
        {
          paramsCode: 'leaveMessageNum',
          text: '留言人次'
        }
      ],
      field: '',
      order: '',
      statistics: {},
      dialogVisible: false,
      radio: '103',
      row: {},
      loading: false
    }
  },
  created() {
    this.$get('/web/areas/get/all/bsProvince').then(res => {
      if (res.data.code === '0') {
        this.carInfo.optionsProvid = res.data.data
        console.log('this', this.optionsProvid)
      }
    })
    this.totalTopEvent()
    this.inquire()
  },
  methods: {
    statusAll(e) {
      console.log('213')
      this.carInfo.Allstatus = e
      this.inquire()
      console.log(this.carInfo.Allstatus)
    },
    inquire() {
      const data = {
        queryRequest: {
          pageSize: this.pagination.pageSize, // 页大小
          pageNum: this.pagination.pageNum, // 页码
          field: this.field, // 排序字段
          order: this.order // 排序规则，ascending 升序，descending降序
        }, // 分页参数
        entity: {
          carSourceNo: this.carInfo.carId, // 车源ID
          userId: this.carInfo.userId, // 用户ID
          vin: this.carInfo.vin, // VIN
          spCity: this.carInfo.applyCityName, // 上牌城市
          onSaleStartTime: this.carInfo.createCarTime
            ? this.carInfo.createCarTime[0]
            : '', //  //上架时间-开始时间
          onSaleEndTime: this.carInfo.createCarTime
            ? this.carInfo.createCarTime[1]
            : '', // 上架时间-结束时间
          licenStartTime: this.carInfo.applyTime
            ? this.carInfo.applyTime[0]
            : '', // 上牌开始时间
          licenEndTime: this.carInfo.applyTime ? this.carInfo.applyTime[1] : '' // 上牌结束时间
        } // 查询参数
      }
      this.loading = true
      this.$post('/web/vehicleOnSale/list', data, 'json').then(res => {
        console.log('ress', res)
        if (res.data.code === '0') {
          this.tableData = res.data.data.rows
          this.pagination.total = res.data.data.total
          this.loading = false
        }
      })
    },
    sortmethods(e) {
      if (e.order == null) {
        this.order = ''
      } else {
        this.order = e.order
      }
      this.params.forEach(ele => {
        if (ele.text === e.column.label) {
          this.field = ele.paramsCode
        }
      })
      console.log('e', e)
      this.pagination.pageSize = 20
      this.pagination.pageNum = 1
      this.inquire()
      console.log('sortmethods')
    },
    changeProvid(e) {
      this.carInfo.applyCity = ''
      this.$get(`/web/areas/get/all/bsCity?provinceId=${e}`).then(res => {
        if (res.data.code === '0') {
          this.carInfo.optionscity = res.data.data
          // this.cityList = res.data.data
        }
      })
    },
    reset() {
      this.carInfo.carId = ''
      this.carInfo.userId = ''
      this.carInfo.vin = ''
      this.carInfo.applyProvid = ''
      this.carInfo.applyCity = ''
      this.carInfo.createCarTime = ''
      this.carInfo.applyTime = ''
      this.carInfo.status = ''
    },
    search() {
      this.pagination.pageSize = 20
      this.pagination.pageNum = 1
      console.log('this.carInfo.applyCity', this.carInfo.applyCity)
      if (this.carInfo.applyCity) {
        this.carInfo.optionscity.forEach(item => {
          if (item.id === this.carInfo.applyCity) {
            this.carInfo.applyCityName = item.name
          }
        })
      } else {
        this.carInfo.applyCityName = ''
      }

      this.inquire()
      console.log(this.carInfo)
    },
    handleClose(done) {
      done()
    },
    goto(row, text) {
      if (text === '下架') {
        this.row = row
        this.dialogVisible = true
        console.log('row', row)
        //      this.$get(`/web/vehicleOnSale/offTheShelf?carInfoId=1&cancelCode=103`).then(res => {
        //   if (res.data.code === "0") {
        //     this.carInfo.optionscity = res.data.data;
        //     // this.cityList = res.data.data
        //   }
        // });
      } else if (text === '确认下架') {
        this.$get(
          `/web/vehicleOnSale/offTheShelf?carInfoId=${
            this.row.carInfoId
          }&cancelCode=${this.radio}`
        ).then(res => {
          if (res.data.code === '0') {
            this.inquire()
            this.$message({
              message: '下架成功',
              type: 'success'
            })
            this.dialogVisible = false
            // this.cityList = res.data.data
          }
        })
      } else if (text === '详情') {
        this.$router.push('/carAdmin/saleList?carInfoId=' + row.carInfoId)
      }
    },
    totalTopEvent() {
      this.$post(
        '/web/vehicleOnSale/statistics',
        {
          carSourceNo: '', // 车源ID
          userId: '', // 用户id
          vin: '', // VIN
          spCity: '', // 上牌城市
          onSaleStartTime: '', // 上架时间-开始时间
          onSaleEndTime: '', // 上架时间-结束时间
          licenStartTime: '', // 上牌开始时间
          licenEndTime: '' // 上牌结束时间
        },
        'json'
      ).then(res => {
        if (res.data.code === '0') {
          this.statistics = res.data.data
        }
        console.log('ress', res)
      })
    }
  }
}
</script>
<style lang="scss" scoped>
.box /deep/ {
  padding: 20px;
  margin: 20px;
  .el-range-separator {
    width: 7%;
  }
  .top {
    margin-bottom: 30px;
    .carStatue {
      margin-top: 20px;
    }
  }
  .seach {
    .el-col {
      display: flex;
      align-items: center;
      .lable {
        min-width: 80px;
        margin-right: 20px;
      }
    }
  }
}
</style>
